<html>
    <head>
        <title>iFrame Demo</title>
        <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

        <!-- web.willflow js -->
        <link rel="stylesheet" href="../../src/wf-iphone/iphone.css" />
        <script type="text/javascript" src="../../src/mootools/mootools-core.js"></script>
        <script type="text/javascript" src="../../src/wf-iphone/iphone.js"></script>
    </head>
    
    <!-- main content here -->
    <body>
        <!-- header form -->
        <div wf_style="header">
            <form action="table_fullscreen.html">
                <table wf_style="fullscreen">
                    <tbody><tr><td bgcolor="#000000">
                    <input type="text" name="query" wf_style="search"/>
                    <select wf_style="popup" name="cat">
                        <option value="1001">Chinese</option>
                        <option value="2001">Western</option>
                    </select>
                    <select wf_style="popup" name="loc">
                        <option value="1001">Shatin</option>
                        <option value="2001">Kowloon</option>
                    </select>
                </td></tr></tbody></table>
            </form>
        </div>
        
        <!-- fullscreen table definition -->
        <table wf_style="fullscreen">
        <tbody>
            <tr>
                <td><img src="restaurant_1.jpg"></img></td>
                <td wf_style="padding">
                    <a href="restaurant_1.html">
                        <div><b>Cafe Union</b></div>
                        <div>Western Food</div>
                        <div wf_style="small">Western Food</div>
                    </a>
                </td>
            </tr>
            <tr>
                <td><img src="restaurant_2.jpg"></img></td>
                <td wf_style="padding">
                    <a href="restaurant_2.html">
                        <div><b>Kiyotaki</b><br/></div>
                        <div>Japanese Food</div>
                    </a>
                </td>
            </tr>
            <tr>
                <td><img src="restaurant_3.jpg"></img></td>
                <td wf_style="padding">
                    <a href="restaurant_1.html">
                        <div><b>Pizza Milano</b><br/></div>
                        <div>Italian Food</div>
                    </a>
                </td>
            </tr>
            <tr>
                <td><img src="restaurant_4.jpg"></img></td>
                <td wf_style="padding">
                    <a href="restaurant_2.html">
                        <div><b>Little Italy</b></div>
                        <div>Italian Food</div>
                    </a>
                </td>
            </tr>
        </tbody>
        </table>
        
        <!-- Footer definition -->
        <div wf_style="footer">
        	<table wf_style="fullscreen" bgcolor="#FFFFDD"><tbody>
        	<tr><td bgcolor="#FFFFDD"><a href="./" disabled="disabled" wf_style="button">Button</a></td></tr>
        	<tr><td bgcolor="#FFFFDD">
        	<iframe src="iframe_footer.html" width="320" height="18" scrolling="no"></iframe>
			</td></tr></tbody></table>
        </div>
    </body>
    <script>
        window.addEvent("load", function() {
            WF.initIPhone();
        });
    </script>
    <link type="text/css" rel="stylesheet" href="../../src/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
    <script language="javascript" src="../../src/dp.SyntaxHighlighter/Scripts/shCore.js"></script>
    <script language="javascript" src="../../src/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
</html>
